{extend name='extra@admin/content'}

{block name='button'}
<div class="nowrap pull-right" style="margin-top:10px">
    <button id="save_category" class='layui-btn layui-btn-large' data-submit>保存分类</button>
</div>
{/block}

{block name='content'}
<div class="panel panel-default news-right" style="overflow:hidden">
    <div class="panel-heading">分类编辑</div>
    <div class="panel-body">
        <form class="form-horizontal" role="form" name="category_add" onsubmit="return false;">


            <!--分类名称-->
            <div class="form-group">
                <div class="col-md-12">
                    <div class="input-group">
                        <span class="input-group-addon">分类名称</span>
                        {if empty($vo) eq false}
                        <input maxlength="64" required="required" title="分类名称不能为空哦" placeholder="请在这里输入分类名称" name='name'
                               class="layui-input" value="{$vo['name']}">
                        {else}
                        <input maxlength="64" required="required" title="分类名称不能为空哦" placeholder="请在这里输入分类名称" name='name'
                               class="layui-input" >
                        {/if}
                    </div>
                </div>
            </div>

            <!--分类别名-->
            <div class="form-group">
                <div class="col-md-12">
                    <div class="input-group">
                        <span class="input-group-addon">分类别名</span>
                        {if empty($vo) eq false}
                        <input maxlength="64" required="required" title="分类名称不能为空哦" placeholder="请在这里输入分类名称" name='alias'
                               class="layui-input disabled" value="{$vo['alias']}" readonly>
                        {else}
                        <input maxlength="64" required="required" title="分类名称不能为空哦" placeholder="请在这里输入分类名称" name='alias'
                               class="layui-input" >
                        {/if}

                    </div>
                </div>
            </div>

            <!--分类icon-->
            <div class="form-group">
                <div class="col-md-12">
                    <div class="form-control" style="height:auto">
                        <label style="color:#ccc">分类icon设置</label>
                        <div class="row nowrap">
                            <div class="col-xs-3" style="width:160px">
                                <div class="upload-image-box transition icon" id="icon">
                                    <input value="__PUBLIC__/static/plugs/uploader/theme/image.png" type="hidden"
                                           name="icon">
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <br>
                                <a data-file="one" data-type="jpg,png,jpeg" data-field="icon" class="btn btn-sm">上传图片</a>
                                <br><br>
                            </div>
                        </div>
                        <p class="help-block" style="margin-top:10px;color:#ccc">icon建议尺寸：30像素 * 30像素</p>
                    </div>
                </div>
            </div>

            <!--分类封面-->
            <div class="form-group">
                <div class="col-md-12">
                    <div class="form-control" style="height:auto">
                        <label style="color:#ccc">分类封面设置</label>
                        <div class="row nowrap">
                            <div class="col-xs-3" style="width:160px">
                                <div class="upload-image-box transition" id="cover">
                                    <input value="__PUBLIC__/static/plugs/uploader/theme/image.png" type="hidden"
                                           name="cover">
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <br>
                                <a data-file="one" data-type="jpg,png,jpeg" data-field="cover" class="btn btn-sm">上传图片</a>
                                <br><br>
                            </div>
                        </div>
                        <p class="help-block" style="margin-top:10px;color:#ccc">icon建议尺寸：300像素 * 200像素</p>
                    </div>
                </div>
            </div>

        </form>
    </div>
</div>
{/block}


{block name='script'}
<script>
    $(function () {
//

        var editDdata = {$vo |default = [] | json_encode};
        if (editDdata['icon']){
            $('#icon').css('background-image', 'url(' + editDdata['icon'] + ')');
        }
        if (editDdata['cover']){
            $('#cover').css('background-image', 'url(' + editDdata['cover'] + ')');
        }

        $('#icon input').on('change',function () {
            $('#icon').css('background-image', 'url(' + this.value + ')');
        })
        $('#cover input').on('change',function () {
            $('#cover').css('background-image', 'url(' + this.value + ')');
        })

//
//        for (var i in editDdata) {
//            $('.news-item').eq(i).data('item', editDdata[i]);
//        }

//        $('body').on('change', '.upload-image-box input', function () {
//            console.log("ddd",this.value);
//            $('.upload-image-box .transition .icon').css('background-image', 'url(' + this.value + ')');
//            $(this).parent('.upload-image-box').css('background-image', 'url(' + this.value + ')');
//        });


        $('#save_category').on('click',function () {
            var $form = $('form[name="category_add"]');
            $form.validate();
            var data = $form.serialize();
            if (editDdata&&Object.keys(editDdata).length>0){
                $.form.load('__SELF__', {data: data}, "patch");
            }else {
                $.form.load('__SELF__', {data: data}, "post");
            }

        });

    });
</script>
{/block}

{block name="style"}
<style>
    .panel{border-radius:0}
    .news-left {left:20px;width:300px;position:absolute;}
    .news-right {position:absolute;}
    .news-left .news-item {position:relative;width:280px;height:150px;max-width:270px;overflow:hidden;border:1px solid #ccc;background-size:cover;background-position:center center;}
    .news-left .news-item.active {border:1px solid #44b549 !important;}
    .news-left .article-add {font-size:22px;text-align:center;display:block;color:#999;}
    .news-left .article-add:hover{color:#666;}
    .news-left .news-title{bottom:0;width:272px;color:#fff;display:block;padding:0 5px;overflow:hidden;position:absolute;margin-left:-1px;text-overflow:ellipsis;max-height:6em;background:rgba(0,0,0,0.7);}
    .news-right .layui-input{border-radius:0;border:1px solid #e5e6e7;}
    .news-right .layui-input:hover, .news-right .layui-input:focus{border-color:#e5e6e7!important;}
    .news-right .input-group-addon{background:#fff;border-radius:0;border-color:#e5e6e7;}
    .news-right .upload-image-box{width:130px;height:90px;background-size:cover;background-position:center center;border:1px solid rgba(125,125,125,0.1);margin:5px}
    .news-item .upload-multiple-close{width:30px;height:30px;line-height:30px;text-align:center;background-color:rgba(0,0,0,.5);color:#fff;float:right;}
    .news-item .upload-multiple-close:hover{text-decoration:none}
    .edui-default .edui-editor{border-radius:0!important}
    .disabled {background: #ccc;  cursor: not-allowed;}
</style>
{/block}


